(function (fruit, ui) {
    ui.define('fruit.ui.Accordion', {
        view: {
            props: {
                'class': 'f-accordion',
                role: 'presentation'
            },
            content: [
                {
                    tag: 'ul',
                    name: 'itemsContainer',
                    props: {
                        'class': 'f-accordion-wrap',
                        items: '{#items}',
                        template: {
                            tag: 'li',
                            props: {
                                'class': 'f-accordion-item'
                            },
                            content: [
                                {
                                    tag: 'a',
                                    props: {
                                        'class': 'f-accordion-header'
                                    },
                                    events: {
                                        click: '{#_onHeaderClick}'
                                    },
                                    content: [
                                        {
                                            tag: 'i',
                                            props: {
                                                'class': 'icon-accordion'
                                            }
                                        },
                                        {
                                            tag: 'span',
                                            content: '{title}'
                                        }
                                    ]
                                },
                                {
                                    props: {
                                        'class': 'f-accordion-content hidden'
                                    },
                                    content: '{content}'
                                }
                            ]
                        }
                    }
                }
            ]
        },
        properties: {
            items: {
                observable: true
            }
        },
        methods: {
            _onHeaderClick: function (sender, args) {
                this.$('itemsContainer').children(function (child) {
                    child.firstChild().removeClass('f-accordion-header-selected');
                    child.lastChild().addClass('hidden');
                });

                sender.addClass('f-accordion-header-selected');
                sender.nextSibling().removeClass('hidden');
            }
        }
    });
})(fruit, fruit.ui);